<style type="text/css">

#left{
	width: 20%;
	float: left;
	border: solid 1px #ccc;
	height: 250px;
	padding: 10px;
}

#right{
	width: 70%;
	float: left;
	border: solid 1px #ccc;
	height: 250px;
	margin-left: 10px;
	
}
</style>
<?php
    $linkHome = $this->url(array('module'=>'training', 'controller'=>'ajax', 'action'=>'home'));
    $linkAbout = $this->url(array('module'=>'training', 'controller'=>'ajax', 'action'=>'about'));
    $linkProduct = $this->url(array('module'=>'training', 'controller'=>'ajax', 'action'=>'product'));
    $linkContact = $this->url(array('module'=>'training', 'controller'=>'ajax', 'action'=>'contact'));
?>
<h1>Ajax load content</h1>
<div id="left">
    <a href="javascript:loadPage('<?php echo $linkHome;?>')">Home</a> <br>
    <a href="javascript:loadPage('<?php echo $linkAbout;?>')">About</a> <br>
    <a href="javascript:loadPage('<?php echo $linkProduct;?>')">Product</a> <br>
    <a href="javascript:loadPage('<?php echo $linkContact;?>')">Contact</a> <br>
</div>

<div id="right">Load content</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('div#right').load('<?php echo $linkHome;?>');
    });
    function loadPage(url){
        $('div#right').load(url);
    }
</script>